<template>
  <el-form ref="deptForm" label-width="120px" :model="form" :rules="formRules">
    <el-form-item label="部门名称" prop="name">
      <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
    </el-form-item>
    <el-form-item label="部门编码" prop="code">
      <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
    </el-form-item>
    <el-form-item label="部门负责人" prop="manager">
      <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
        <el-option :value="item.username" :label="item.username" v-for="item in list" :key="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="部门介绍" prop="introduce">
      <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="hSubmit">确定</el-button>
      <el-button size="small" @click="hCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
    import {getEmployeesSimples} from '@/api/employees'
    import {addDepartment,getDepartmentDetail,updateDepartment} from '@/api/departments'
export default {
  props:{
    originList:{
      type:Array,
      required:true
    },
    id:{
      type:String,
    required:true
    },
    isEdit:{
      type:Boolean,
      required:true
    }
  },
    data() {
        return {
            list:[],//存储部门负责人列表
            // 收集表单数据对象
            form:{
                name:'',
                code:'',
                manager:'',
                introduce:''
            },
            // 验证规则对象
            formRules:{
              name:[
                {required:true,message:'请输入部门名称',trigger:'blur'},
                {min:1,max:50,message:'请输入1-50位的部门名称',trigger:'blur'}
              ],
              code:[
                {required:true,message:'请输入部门编码',trigger:'blur'},
                {min:1,max:50,message:'请输入1-50位的部门编码',trigger:'blur'}
              ],
              manager:[
                {required:true,message:'请输入部门负责人',trigger:'change'}
              ],
              introduce:[
                {required:true,message:'请输入部门介绍',trigger:'blur'},
                {min:1,max:300,message:'请输入1-50位的部门介绍',trigger:'blur'}
              ]
            }
        }
    },
    // // 侦听组件内的props中属性或者data函数中属性的变化
    // watch:{
    //   id: function(new_val,old_val){
    //     console.log(new_val,'new_val');
    //     console.log(old_val,'old_val');
    //     // 解决数据不更新的方式三
    //     this.loadDepartmentDetail()
    //   },
    //   // id: {
    //     // fandler(new_val,old_val){
    //   //   console.log(new_val,'new_val');
    //   //   console.log(old_val,'old_val');
    //   //   // 解决数据不更新的方式三
    //   // }
    //   // immediate:true //页面一加载就会立即执行一次
    //   // }
    // },
    created() {
        this.loadEmployeesSimples()
        // 只有是编辑操作才需要请求详情数据
        if(this.isEdit){
          this.loadDepartmentDetail()
        }
    },
    methods: {

      // 加载部门详情数据 填充到表单中
      async loadDepartmentDetail(){
        try {
          const res = await getDepartmentDetail(this.id)
          console.log('getDepartmentDetail',res);
        this.form = res.data
        } catch (error) {
          console.log(error);
        }
      },
        // 获取部门负责人列表
        async loadEmployeesSimples(){
            try{
                const res = await getEmployeesSimples()
                console.log(res);
                this.list = res.data
            }catch(error){
                console.log(error);
            }
        },
        // 实现添加子部门
        async doAdd(){
         try{
           // this.form中缺少pid 怎么获取到pid
           const res = await addDepartment({pid:this.id,...this.form})
           console.log(res);
          // 重新渲染
          // 关闭弹层
          // 子传父
          this.$emit('success')
         }catch(error){
          console.log(error);
        }
        },
        // 实现编辑部门
        async doEdit(){
          try {
            const res = await updateDepartment(this.form)
            console.log(res);
            this.$emit('success')
          } catch (error) {
            console.log(error);
          }

        },
        hSubmit(){
          // // 实现兜底校验
          this.$refs.deptForm.validate((valid)=>{
            if(valid){
              this.isEdit ? this.doEdit():this.doAdd()
            }
          })
        },
        hCancel(){
          // 关闭弹层 父组件
          // 子传父关闭弹层
          this.$emit('close')
        }
    },

}
</script>

<style>

</style>